<template>
	<view class="page" :style="{ '--fss': app.theme.fss() }">
		<view class="indexHead" :class="scrollTop > 0 ? 'scrollEd' : ''">
			<status-bar></status-bar>
			<view class="indexView flex">
				<view class="searchView flex">
					<text class="iconfont icon-sousuo"></text>
					<input
						class="text"
						placeholder="搜索AI创作的歌曲"
						auto-focus
						disable-default-padding
						:adjust-position="false" 
						:show-confirm-bar="false"
						confirm-type="search"
						placeholder-style="color:rgba(255,255,255,0.6);font-size:calc(27rpx * var(--fss));"
						v-model="keyword"
						@confirm="toSearch()"
					/>
					<view class="btn" @tap="toSearch()">搜索</view>
				</view>
				<view class="right" @tap="app.util.goBack()">取消</view>
			</view>
			<scroll-view scroll-x class="navFlex scrollxView" v-if="showType !== 'hot'">
				<view class="view">
					<view class="item active">全部</view>
					<view class="item">摇滚音乐</view>
					<view class="item">民谣</view>
					<view class="item">电子</view>
					<view class="item">舞曲</view>
					<view class="item">流行</view>
					<view class="item">国风</view>
					<view class="item">纯音乐</view>
				</view>
			</scroll-view>
		</view>
		<status-bar></status-bar>
		<template v-if="showType === 'hot'">
			<!-- 热门搜索 -->
			<view class="musicTitle flex" v-if="info && info.hot_keywords.length > 0">
				<view class="left">
					<text>搜索热门</text>
				</view>
			</view>
			<view class="hotGroup flex" v-if="info && info.hot_keywords.length > 0">
				<view class="item" v-for="(item, index) in info.hot_keywords" @tap="toSearch(item)">{{ item }}</view>
			</view>
			
			<!-- 搜索历史 -->
			<view class="musicTitle flex" v-if="historySearchList.length > 0">
				<view class="left">
					<text>搜索历史</text>
				</view>
				<view class="right iconfont icon-shanchu" @tap="clearHistorySearch"></view>
			</view>
			<view class="hotGroup flex" v-if="historySearchList.length > 0">
				<view class="item" v-for="(item, index) in historySearchList" @tap="toSearch(item)">{{ item }}</view>
			</view>
			
			<!-- 排行榜 -->
			<view class="musicTitle flex">
				<view class="left">
					<text>排行热度榜</text>
				</view>
			</view>
			<scroll-view scroll-x class="scrollxView hotView">
				<view class="view">
					<view class="item">
						<view class="head flex">
							<view class="left">
								<view class="h3 ell">热歌榜</view>
								<view class="desc ell">05-23更新</view>
							</view>
							<view class="play flex">
								<text class="iconfont icon-bofang1"></text>
							</view>
						</view>
						<view class="list">
							<view class="listItem flex">
								<text class="sort">1</text>
								<text class="name ell">如果爱忘了(Live)</text>
								<text class="desc ell">- 汪苏泷&蔡依林</text>
							</view>
							<view class="listItem flex">
								<text class="sort">2</text>
								<text class="name ell">做一个情绪稳定的人类 (才怪</text>
								<text class="desc ell">- 徐梦洁</text>
							</view>
							<view class="listItem flex">
								<text class="sort">3</text>
								<text class="name ell">Hero (Explicit)</text>
								<text class="desc ell">- VodKe /ROYYNN /硬曲王</text>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="head flex">
							<view class="left">
								<view class="h3 ell">流行榜</view>
								<view class="desc ell">05-23更新</view>
							</view>
							<view class="play flex">
								<text class="iconfont icon-bofang1"></text>
							</view>
						</view>
						<view class="list">
							<view class="listItem flex">
								<text class="sort">1</text>
								<text class="name ell">sax love</text>
								<text class="desc ell">- 刘雨欣 /特有AI</text>
							</view>
							<view class="listItem flex">
								<text class="sort">2</text>
								<text class="name ell">sax love</text>
								<text class="desc ell">- CHENYI /人面兽心 /花凯</text>
							</view>
							<view class="listItem flex">
								<text class="sort">3</text>
								<text class="name ell">漂亮姑娘</text>
								<text class="desc ell">- 王瑾璇</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</template>
		<template v-else>
			<view class="navPlace"></view>
			<loading v-if="list === null"></loading>
			<template v-else>
				<no-data v-if="list.length <= 0"></no-data>
				<template v-else>
					<view class="group">
						<view class="item flex">
							<view class="imageView flex">
								<image src="https://file.shengmaapp.com/storage/aichat/20240401/c45045ad649c15f6e98bef1fdf4a0def.jpg" mode="aspectFill" class="image"></image>
							</view>
							<view class="info">
								<view class="h3 ell">生日快乐</view>
								<view class="desc ell">1950s jazz scat</view>
							</view>
							<view class="btnFlex iconfont icon-bofang1"></view>
						</view>
						<view class="item flex">
							<view class="imageView flex">
								<image src="https://file.shengmaapp.com/storage/aichat/20240522/d9c9baed501a80e5e5ad39f8e8b97b51.jpg" mode="aspectFill" class="image"></image>
							</view>
							<view class="info">
								<view class="h3 ell">SPAGHETTI</view>
								<view class="desc ell">Italian</view>
							</view>
							<view class="btnFlex iconfont icon-bofang1"></view>
						</view>
						<view class="item flex">
							<view class="imageView flex">
								<image src="https://file.shengmaapp.com/storage/aichat/20240401/868c9b2103421668b2d7c89f12add164.jpg" mode="aspectFill" class="image"></image>
							</view>
							<view class="info">
								<view class="h3 ell">Wake（Like）</view>
								<view class="desc ell">Young & Free - Wake</view>
							</view>
							<view class="btnFlex iconfont icon-bofang1"></view>
						</view>
						<view class="item flex">
							<view class="imageView flex">
								<image src="https://file.shengmaapp.com/storage/aichat/20240523/7920cd1a2b1fc6dcd1fc0432c1a04f8e.jpg" mode="aspectFill" class="image"></image>
							</view>
							<view class="info">
								<view class="h3 ell">想你，希望你一切都好</view>
								<view class="desc ell">U27479125</view>
							</view>
							<view class="btnFlex iconfont icon-bofang1"></view>
						</view>
						<view class="item flex">
							<view class="imageView flex">
								<image src="https://file.shengmaapp.com/storage/aichat/20240523/fa02c35d76e4c65780fc75b45e3d0efe.jpg" mode="aspectFill" class="image"></image>
							</view>
							<view class="info">
								<view class="h3 ell">我是一个粉刷匠</view>
								<view class="desc ell">AI音乐研究生</view>
							</view>
							<view class="btnFlex iconfont icon-bofang1"></view>
						</view>
						
							<view class="item flex">
								<view class="imageView flex">
									<image src="https://file.shengmaapp.com/storage/aichat/20240401/c45045ad649c15f6e98bef1fdf4a0def.jpg" mode="aspectFill" class="image"></image>
								</view>
								<view class="info">
									<view class="h3 ell">生日快乐</view>
									<view class="desc ell">1950s jazz scat</view>
								</view>
								<view class="btnFlex iconfont icon-bofang1"></view>
							</view>
							<view class="item flex">
								<view class="imageView flex">
									<image src="https://file.shengmaapp.com/storage/aichat/20240522/d9c9baed501a80e5e5ad39f8e8b97b51.jpg" mode="aspectFill" class="image"></image>
								</view>
								<view class="info">
									<view class="h3 ell">SPAGHETTI</view>
									<view class="desc ell">Italian</view>
								</view>
								<view class="btnFlex iconfont icon-bofang1"></view>
							</view>
							<view class="item flex">
								<view class="imageView flex">
									<image src="https://file.shengmaapp.com/storage/aichat/20240401/868c9b2103421668b2d7c89f12add164.jpg" mode="aspectFill" class="image"></image>
								</view>
								<view class="info">
									<view class="h3 ell">Wake（Like）</view>
									<view class="desc ell">Young & Free - Wake</view>
								</view>
								<view class="btnFlex iconfont icon-bofang1"></view>
							</view>
							<view class="item flex">
								<view class="imageView flex">
									<image src="https://file.shengmaapp.com/storage/aichat/20240523/7920cd1a2b1fc6dcd1fc0432c1a04f8e.jpg" mode="aspectFill" class="image"></image>
								</view>
								<view class="info">
									<view class="h3 ell">想你，希望你一切都好</view>
									<view class="desc ell">U27479125</view>
								</view>
								<view class="btnFlex iconfont icon-bofang1"></view>
							</view>
							<view class="item flex">
								<view class="imageView flex">
									<image src="https://file.shengmaapp.com/storage/aichat/20240523/fa02c35d76e4c65780fc75b45e3d0efe.jpg" mode="aspectFill" class="image"></image>
								</view>
								<view class="info">
									<view class="h3 ell">我是一个粉刷匠</view>
									<view class="desc ell">AI音乐研究生</view>
								</view>
								<view class="btnFlex iconfont icon-bofang1"></view>
							</view>
					</view>
					<load-footer-text :load="hasMore ? 1 : 2"></load-footer-text>
				</template>
			</template>
		</template>
	</view>
</template>

<script setup>
	import { ref, onMounted, inject, computed } from "vue";
	import {  onLoad, onShow, onReachBottom, onPageScroll } from "@dcloudio/uni-app";
	const app = inject('app');
	
	/* 变量区域 */
	// 页面滚动位置
	const scrollTop = ref(0);
	
	// 关键词
	const keyword = ref("");
	
	// 基本信息
	const info = ref(null);
	
	// 列表
	const list = ref(null);
	
	// 当前页码
	const page = ref(1);
	
	// 是否还有更多
	const hasMore = ref(true);
	
	// 是否处于加载中
	const hasLoading = ref(false);
	
	// 展示哪个界面
	const showType = ref("hot");
	
	// 历史搜索记录
	const historySearchList = ref(uni.getStorageSync("historySearchList") || []);
	
	
	/* 方法区域 */
	// 清空历史搜索
	function clearHistorySearch(){
		historySearchList.value = [];
		uni.removeStorageSync("historySearchList");
	}
	
	// 去搜索
	function toSearch(k){
		if(k) keyword.value = k;
		if(keyword.value.length > 0){
			let historySearchList = uni.getStorageSync("historySearchList") || [];
			if(historySearchList.indexOf(keyword.value) !== -1){
				historySearchList.splice(historySearchList.indexOf(keyword.value), 1);
			}
			historySearchList.unshift(keyword.value);
			
			uni.setStorageSync("historySearchList", historySearchList);
			historySearchList.value = historySearchList;
		}
		
		showType.value = "result";
		list.value = null;
		page.value = 1;
		hasMore.value = true;
		hasLoading.value = false;
		getList();
	}
	
	// 获取信息
	function getData(){
		info.value = {
			hot_keywords: ["如果爱忘了", "做一个情绪稳定的人类", "Hero (Explicit)", "sax love"]
		}
	}
	
	// 获取列表
	function getList(){
		list.value = [{
			
		}];
		return;
		
		if(hasMore.value && !hasLoading.value){
			hasLoading.value = true;
			app.request.ajax({
				url: "/api/AiWrite/pen_craft_list",
				data: {
					page: page.value,
					keyword: keyword.value,
				},
				success(res){
					if(page.value == 1){
						list.value = res.data.data;
					}else{
						list.value = list.value.concat(res.data.data);
					}
					
					if(res.data.last_page > res.data.current_page){
						hasMore.value = true;
						page.value++;
					}else{
						hasMore.value = false;
					}
				},
				done(){
					hasLoading.value = false;
				}
			});
		}
	}
	
	
	// 页面被加载完成
	onMounted(() => {
		getData();
	});
	
	// 页面到底部
	onReachBottom(() => {
		showType.value !== 'hot' && getList();
	});
	
	// 页面滚动
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});
	
	// 计算标题HTML
	const toHTML = computed(() => {
		return function(str){
			if(keyword.value.trim().length > 0 && str.indexOf(keyword.value) !== -1){
				return str.replace(new RegExp(keyword.value, 'gi'), `<span>${keyword.value}</span>`);
			}else{
				return str;
			}
		}
	})
</script>

<style lang="scss" scoped>
	.page{
		$navHeight: 78rpx;
		width: 100%;
		overflow: hidden;
		background: url("/static/img/indexColor.png")no-repeat center top;
		background-size: cover;
		position: relative;
		padding-top: 100rpx;
		min-height: 100vh;
		&:after{
			position: absolute;
			right: -100rpx;
			top: -100rpx;
			background: url("/static/img/icon_template3_cover.png")no-repeat center right;
			background-size: cover;
			width: 420rpx;
			height: 420rpx;
			content: "";
			opacity: 0.2;
			filter: blur(20rpx);
		}
		.indexHead{
			padding: 0 $padding;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 3;
			&.scrollEd{
				background: rgba(0,0,0,0.06);
				backdrop-filter: blur(60rpx);
				.navFlex{
					border-bottom: 0;
				}
			}
			.indexView{
				flex-direction: row;
				align-items: center;
				height: 100rpx;
				.searchView{
					border-radius: 100rpx;
					padding: 0 10rpx 0 30rpx;
					width: 100%;
					height: 75rpx;
					background: rgba(255,255,255,0.06);
					flex-direction: row;
					align-items: center;
					backdrop-filter: blur(30rpx);
					.iconfont{
						color: rgba(255,255,255,0.9);
						font-size: calc(27rpx * var(--fss));
					}
					.text{
						flex: 1;
						width: 0;
						margin: 0 25rpx;
						line-height: 45rpx;
						padding: 15rpx 0;
						height: 75rpx;
						color: rgba(255,255,255, 1);
						font-size: calc(27rpx * var(--fss));
					}
					.btn{
						color: #000;
						font-weight: bold;
						padding: 0 28rpx;
						line-height: 55rpx;
						border-radius: 100rpx;
						font-size: calc(25rpx * var(--fss));
						background: $background;
						transition: 0.2s all;
						&:active{
							opacity: 0.8;
						}
					}
				}
				.right{
					color: rgba(255,255,255,0.7);
					font-size: calc(27rpx * var(--fss));
					flex-shrink: 0;
					padding: 0 12rpx;
					margin-left: 20rpx;
				}
			}
			.navFlex{
				margin: 0 (-$padding);
				width: calc(100% + ($padding * 2));
				height: $navHeight;
				border-bottom: 2rpx solid rgba(255,255,255,0.035);
				.item{
					line-height: $navHeight - 10rpx;
					font-size: calc(27rpx * var(--fss));
					color: rgba(255,255,255,0.7);
					padding: 0 10rpx 0 10rpx;
					margin-right: 30rpx;
					transition: 0.2s all;
					&:nth-last-child(1){
						margin-right: $padding;
					}
					&:nth-child(1){
						margin-left: $padding;
					}
					&.active{
						color: #FFF;
						font-weight: bold;
						font-size: calc(29rpx * var(--fss));
					}
					&:active{
						opacity: 0.8;
					}
				}
			}
		}
		.navPlace{
			height: $navHeight;
		}
		.musicTitle{
			padding: 0 $padding;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			position: relative;
			z-index: 2;
			height: 65rpx + 20rpx;
			padding-top: 20rpx;
			.left{
				position: relative;
				text{
					font-size: calc(29rpx * var(--fss));
					color: #FFF;
					font-weight: bold;
					font-style: italic;
					position: relative;
					z-index: 2;
				}
				&:after{
					content: "";
					position: absolute;
					right: -40rpx;
					top: 0;
					z-index: 1;
					width: 473rpx * 0.13;
					height: 286rpx * 0.13;
					background: url("/static/img/lineBlockOver.png") no-repeat center center;
					background-size: cover;
				}
			}
			.right{
				font-size: calc(30rpx * var(--fss));
				color: #FFF;
				line-height: 45rpx;
				padding: 0 10rpx;
				opacity: 0.65;
				margin-right: -10rpx;
			}
		}
		.hotGroup{
			padding: 0 $padding;
			position: relative;
			z-index: 2;
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: 15rpx;
			.item{
				font-size: calc(26rpx * var(--fss));
				margin-right: 22rpx;
				margin-bottom: 22rpx;
				line-height: 55rpx;
				color: rgba(255,255,255,0.65);
				background: rgba(255,255,255,0.04);
				padding: 0 26rpx;
				border-radius: 100rpx;
				transition: 0.2s all;
				&:active{
					opacity: 0.8;
				}
				&.active{
					background: $background;
					color: #FFF;
					font-weight: bold;
				}
			}
		}
		.hotView{
			position: relative;
			z-index: 2;
			margin: 15rpx 0 0 0;
			.item{
				background: rgba(255, 255, 255, 0.06);
				margin-right: 22rpx;
				border-radius: 35rpx;
				width: 600rpx;
				&:nth-child(1){
					margin-left: $padding;
				}
				&:nth-last-child(1){
					margin-right: $padding;
				}
				.head{
					padding: 30rpx 30rpx;
					flex-direction: row;
					align-items: center;
					.left{
						flex: 1;
						width: 0;
						margin-right: 22rpx;
						.h3{
							font-weight: bold;
							font-size: calc(28rpx * var(--fss));
							line-height: 1.2;
							color: rgba(255,255,255,0.9);
						}
						.desc{
							margin-top: 13rpx;
							font-size: calc(20rpx * var(--fss));
							line-height: 1.2;
							color: rgba(255,255,255,0.5);
						}
					}
					.play{
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						background: $background;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						padding-left: 4rpx;
						.iconfont{
							font-size: calc(26rpx * var(--fss));
							color: #000;
						}
					}
				}
				.list{
					background: #2a2a2a;
					border-radius: 35rpx;
					padding: 36rpx 30rpx;
					.listItem{
						flex-direction: row;
						align-items: center;
						margin-bottom: 35rpx;
						&:nth-last-child(1){
							margin-bottom: 0;
						}
						.sort{
							color: rgba(255,255,255,0.8);
							font-size: calc(26rpx * var(--fss));
						}
						.name{
							margin-left: 16rpx;
							margin-right: 10rpx;
							color: rgba(255,255,255,0.8);
							font-size: calc(26rpx * var(--fss));
						}
						.desc{
							color: rgba(255,255,255,0.4);
							font-size: calc(26rpx * var(--fss));
							flex: 1;
							width: 0;
						}
					}
				}
			}
		}
		.group{
			position: relative;
			z-index: 2;
			margin-top: 30rpx;
			.item{
				padding: 0 30rpx 0 30rpx;
				margin-bottom: 40rpx;
				flex-direction: row;
				align-items: center;
				transition: 0.2s all;
				&:active{
					opacity: 0.8;
				}
				&:nth-last-child(1){
					margin-bottom: 0;
				}
				.imageView{
					width: 96rpx;
					height: 96rpx;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					background: rgba(255,255,255,0.06);
					border-radius: 15rpx;
					.image{
						width: 100%;
						height: 100%;
						border-radius: 15rpx;
						display: block;
					}
					.loading{
						transform: scale(0.5);
					}
				}
				.info{
					margin: 0 25rpx;
					flex: 1;
					width: 0;
					.h3{
						font-size: calc(26rpx * var(--fss));
						line-height: 1.2;
						color: rgba(255,255,255,0.9);
					}
					.desc{
						font-size: calc(22rpx * var(--fss));
						line-height: 1.2;
						color: rgba(255,255,255,0.6);
						margin-top: 8rpx;
					}
				}
				.btnFlex{
					width: 44rpx;
					line-height: 44rpx;
					border-radius: 50%;
					text-align: center;
					background: rgba(255,255,255,0.8);
					flex-direction: row;
					align-items: center;
					justify-content: center;
					padding-left: 4rpx;
					font-size: calc(22rpx * var(--fss));
					color: #000;
				}
			}
		}
	}
</style>